<template>
    <!-- 工资管理系统 -->
    <div class="wage" v-loading="loading" v-show="!isadd">
        <!-- 工资管理系统头部 -->
        <div class="wage-top">
            <el-button type="danger" @click="()=>{
                $router.push({
                    path: '/install',
                    query: {
                        id: dataMonthList
                    }
                })
            }">社保历史归档</el-button>
            <el-button type="primary" @click="() => {
                $router.push({
                    path: '/socialStatement',
                    query: {
                        id: dataMonthList
                    }
                })
            }">{{ dataMonthList }}报表</el-button>
        </div>
        <!-- 工资管理系统搜索区 -->
        <div class="wage-search">
            <div class="wage-search-item">
                <div>部门:</div>
                <p>
                    <el-checkbox v-for="item in orgList" :key="item.id" :label="item.name" size="large"
                        @change="handleCheck(item.id)" />
                </p>
            </div>
            <div class="wage-search-item" style="margin: 50px 0;">
                <div>社保城市:</div>
                <p>
                    <el-checkbox v-for="item in SocialCity" :key="item.id" v-model="item.show" size="large"
                        @change="SocialCityId(item.id)">
                        {{ item.name }}
                    </el-checkbox>
                </p>
            </div>
            <div class="wage-search-item" style="margin-top: -30px;">
                <div>公积金城市:</div>
                <p>
                    <el-checkbox v-for="item in SocialCity" :key="item.id" :label="item.name" size="large"
                        @click="SocialCityId2(item.id)" />
                </p>
            </div>
        </div>
        <!-- 表格 -->
        <div class="wage-table">
            <el-table :data="wageList" style="width: 100%" default-expand-all
              :header-cell-style="{ background: '#f4f6f8', color: '#909399' }">
                <el-table-column prop="id" label="序号" width="80" />
                <el-table-column prop="username" label="姓名" />
                <el-table-column prop="mobile" label="手机" />
                <el-table-column prop="workNumber" label="工号" />
                <el-table-column prop="departmentName" label="部门" />
                <el-table-column prop="timeOfEntry" label="入职时间" />
                <el-table-column prop="leaveTime" label="离职时间">
                    <template #default="{ row }">
                        <span>{{ row.leaveTime == null ? '--' : row.leaveTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="providentFundCity" label="社保城市" />
                <el-table-column prop="participatingInTheCity" label="公积金城市" />
                <el-table-column prop="socialSecurityBase" label="社保基数" />
                <el-table-column prop="providentFundBase" label="公积金基数" />
            </el-table>
            <!-- 分页 -->
            <div class="wage-pagination">
                <el-pagination v-model:current-page="pageSize.page"  layout="prev, pager, next"
                    :total="total" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
    <RouterView v-show="isadd"></RouterView>
</template>


<script setup>
import { ref, watch, onMounted } from 'vue';
import { getUserInfo, getDepartment, getSocialCity, getYear } from "@/api/socialApi/socialApi.js"
import { useRoute } from "vue-router"
let route = useRoute()
console.log(route)
let isadd = ref(false)
let loading = ref(false) //loading
let wageList = ref([]) // 工资列表
let orgList = ref([]) // 部门
let dataMonthList = ref("")//获取报表月份
let SocialCity = ref([])//社保城市
let pageSize = ref({
    page: 1, //页数 
    pageSize: 10,//条数
    departmentChecks: '', //部门
    socialSecurityChecks: "", //社保城市
    providentFundChecks: ""//公积金城市
})
let total = ref(0)
let rou = () => {
    if (route.fullPath != "/social") {
        isadd.value = true
    } else {
        isadd.value = false
    }
}
watch(() => route.fullPath, () => {
    rou()
})
rou()
function getWage() {
    loading.value = true
    // 获取工资列表
    getUserInfo(pageSize.value).then((res) => {
        total.value = res.data.total
        wageList.value = res.data.rows
        loading.value = false
    })
    // 获取组织架构
    getDepartment().then((res) => {
        orgList.value = res.data
        loading.value = false
    })
    getSocialCity().then(res => {
        SocialCity.value = res.data
        loading.value = false
    })
    // // 获取报表
    getYear().then((res) => {
        dataMonthList.value = res.data.dataMonth
    })
}

getWage()
// 分页
let handleCurrentChange = (val) => {
    pageSize.value.page = val
    getWage()
};

// 封装搜索数据的处理
let intOfId = (arrId,id)=>{
    arrId.indexOf(id) == -1 ? arrId.push(id) : arrId.splice(arrId.indexOf(id), 1)
    return arrId
}
// // 搜索
let arrHandleCheck = ref([])
// // 部门搜索
let handleCheck = (id) => {
     pageSize.value.departmentChecks =  intOfId(arrHandleCheck.value,id)
    getWage()
}
// 社保城市
let gitId = ref([])
let SocialCityId = (id) => {
    pageSize.value.socialSecurityChecks =  intOfId(gitId.value,id)
    getWage()
}
// 公积金城市
let gitId2 = ref([])
let SocialCityId2 = (id) => {
    pageSize.value.providentFundChecks = intOfId(gitId2.value,id)
    getWage()
}
</script>

<style scoped lang="scss">
body {
    margin: 0;
}

.example-showcase .el-loading-mask {
    z-index: 9;
}

.wage-top {
    background-color: #fff;
    line-height: 60px;
    padding: 0 20px;
}

.wage-search {
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;
    font-size: 12px;

    .wage-search-item {
        display: flex;
        align-items: center;
        div {
            width: 100px;
            font-weight: 700;
            margin-top: 10px;
        }

        p {
            height: 30px;
        }

    }
}

// 表格
.wage-table {
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;
}

.wage-pagination {
    display: flex;
    justify-content: space-around;
}

.form {
    input {
        height: 40px;
        line-height: 40px;
    }
}
</style>